<template>
	<view class="list-page">
		<view class="list-box">
			<view class="item" v-for="(item, index) in list" :key="index" @click="goDetail">
				<view class="poster">
					<image class="image" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"></image>
					<view class="mask">
						<u-icon name="play-right-fill" color="#fff" size="32"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="title">视频标题</view>
				</view>
			</view>
		</view>
		
		<u-empty margin-top="50" v-show="list.length === 0" :text="$t('列表为空')" mode="list"></u-empty>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [1, 2, 3]
			}
		},
		methods: {
			goDetail () {
				uni.navigateTo({
					url: '/pages/mine/video/detail'
				})
			}
		}
	}
</script>

<style lang="scss">
.list-page {
	min-height: 100vh;
	background-color: #f8f8f8;
	.list-box {
		padding: 28rpx;
		.item {
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			& + .item {
				margin-top: 20rpx;
			}
			.poster {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				.image {
					width: 100%;
					height: 100%;
				}
				.mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 10;
					background-color: rgba($color: #000, $alpha: 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.content {
				flex: 1;
				margin-left: 20rpx;
				.title {
					color: #333;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
